<template>
  <view>
    <view class="amount"> <text>￥</text>{{ dataInfo.price }} </view>
    <view class="pay-tips">支付金额</view>

    <view class="pay-info-item">
      <view class="film-title">{{ dataInfo.movie_info.movie_name }}</view>
      <!-- <view class="film-text">5月29日 2021-09-29 11:00:00~2021-09-29</view> -->
      <view class="film-text">{{ dataInfo.movie_info.cinemaName }}</view>
      <view class="film-text">{{ dataInfo.movie_info.cinemaAddress }}</view>
      <!-- <view class="film-text">{{dataInfo.movie_info.hallName}}</view> -->
      <view class="film-text">
        <text v-for="(value, index) in dataInfo.showInfor" :key="index">{{
          value.seatName
        }}</text>
      </view>
    </view>

    <!-- <view class="pay-item">
			<view class="item-left">
				<image src="../../static/images/icon_wechat.png"></image>
				<text>微信支付</text>
			</view>
			<image src="../../static/images/icon-choice-yes.png" class="pay-check"></image>
		</view> -->
    <!-- <view class="pay-item">
      <view class="item-left">
        <image
          src="https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/03/17/bd7624329bce4f5bb917c90de68d814a.png"
        ></image>
        <text>余额支付</text>
      </view>
      <image
        src="../../static/images/icon-choice-yes.png"
        class="pay-check"
      ></image>
    </view> -->
    <s-payment-method
      :state="state"
      @onTapPay="onTapPay"
      :showMixed="true"
    ></s-payment-method>
    <view class="scroll-box" v-if="cardshow">
      <view style="margin-left: 30rpx; margin-bottom: 20rpx">购物卡 </view>
      <scroll-view scroll-x class="index-nav-scroll">
        <radio-group>
          <view
            class="index-nav-view index-nav-view2"
            v-for="(item, index) in cardList"
            :key="index"
          >
            <view
              class="index index2"
              @click="clearPaymentSelection(item, index)"
            >
              <view> 电影卡 </view>
              <view style="margin-top: 10rpx; font-size: 26rpx">
                余额：{{ item.remainingAmount }}元
              </view>
              <view class="indexradio"
                ><radio
                  :checked="selectedCard == index"
                  color="var(--ui-BG-Main)"
                /> </view
            ></view>
          </view>
        </radio-group>
      </scroll-view>
    </view>
    <view class="pay-btns" @click="paySubmit()">确认支付</view>
  </view>
</template>

<script>
// import {filmPay,getOrderInfo} from "@/api/film.js"
// import {checkUser,filmH5Pay} from "@/api/api.js"
import sheep from "@/sheep";
export default {
  data() {
    return {
      state: {
        payMethods: ["wechat", "money", "mixed", "card"],
      },
      dataInfo: {
        price: 45,
        movie_info: {
          movie_name: "",
          cinemaAddress: "",
          cinemaId: 0,
          cinemaName: "",
        },
        showInfor: [{ seatName: "" }],
        orderNumber: 0,
      },
      payMethod: "",
      balance: sheep.$store("user").userInfo.price || 0,
      cardList: [],
      cardshow: false,
      cardNumber: "",
      selectedCard: "",
    };
  },
  onLoad(opt) {
    this.getOrderInfo(opt.orderNumber);
    this.orderNumber = opt.orderNumber;
    this.getPayableCard();
  },

  methods: {
    onTapPay(e) {
      if (e === "wechat") {
        this.payMethod = 2;
        this.cardshow = false;
      } else if (e === "money") {
        this.payMethod = 3;
        this.cardshow = false;
      } else if (e === "mixed") {
        this.payMethod = 4;
        this.cardshow = false;
      } else if (e === "card") {
        this.payMethod = 5;
        this.cardshow = true;
      }
    },
    clearPaymentSelection(item, index) {
      console.log(item);
      this.selectedCard = index;
      this.cardNumber = item.cardNumber;
    },
    async getPayableCard() {
      const data = await sheep.$api.order.getPayableCard({
        type: 3,
      });
      this.cardList = data.data;
      this.cardNumber = data.data[0].cardNumber;
    },
    async getOrderInfo(orderNumber) {
      const res = await sheep.$api.movie.getOrderInfo({
        orderNumber: orderNumber,
      });
      const backParams = JSON.parse(res.data.backParams);
      this.dataInfo.price = res.data.orderPrice;
      this.dataInfo.movie_info.movie_name = JSON.parse(
        res.data.movieInfo
      ).filmName;
      this.dataInfo.cinemaName = backParams.cinemaName;
      this.dataInfo.cinemaAddress =
        backParams.cityName + backParams.cinemaAddress;
      this.dataInfo.cinemaAddress = backParams.cinemaAddress;
      this.dataInfo.showInfor = backParams.seats;
      // console.log('orderNumber',JSON.parse(res.data.backParams))
    },

    paySubmit() {
      if (!this.payMethod) {
        uni.showToast({
          icon: "none",
          title: "请选择支付方式",
        });
        return;
      }

      if (
        this.balance - parseFloat(this.dataInfo.price) < 0 &&
        this.payMethod === 3
      ) {
        uni.showToast({
          icon: "none",
          title: "账户余额小于订单余额请使用微信支付",
        });
        return;
      }

      console.log(this.payMethod);
      // // 微信支付
      if (this.payMethod === 2) {
        this.miniPay();
      }

      // 余额支付
      if (this.payMethod === 3) {
        this.moneyPay();
      }

      // 混合支付
      if (this.payMethod === 4) {
        this.miexedpay();
      }

      // // 电影卡支付
      if (this.payMethod === 5) {
        this.cardpay();
      }
    },
    // 电影卡支付
    async cardpay() {
      const res = await sheep.$api.movie.payMovieAdd({
        payId: this.orderNumber,
        wechatType: 4,
        cardNumber: this.cardNumber,
      });
      if (res.code == 200) {
        sheep.$store("user").getInfo();
        uni.showToast({
          icon: "none",
          title: "支付成功",
        });
        setTimeout(() => {
          uni.redirectTo({
            url: "/pages/movie/my-ticket",
          });
        }, 500);
      }
    },

    // 余额下单支付
    async moneyPay() {
      const res = await sheep.$api.movie.payMovieAdd({
        payId: this.orderNumber,
        wechatType: 2,
      });
      if (res.code == 200) {
        sheep.$store("user").getInfo();
        uni.showToast({
          icon: "none",
          title: "支付成功",
        });
        setTimeout(() => {
          uni.redirectTo({
            url: "/pages/movie/my-ticket",
          });
        }, 500);
      }
    },

    // 混合支付
    async miexedpay() {
      const res = await sheep.$api.movie.payMovieAdd({
        payId: this.orderNumber,
        wechatType: 3,
      });
      if (res.code == 200) {
        uni.requestPayment({
          provider: "wxpay",
          timeStamp: res.data.timeStamp,
          nonceStr: res.data.nonceStr,
          package: "prepay_id=" + res.data.package_,
          signType: res.data.signType,
          paySign: res.data.paySign,
          success: function (res) {
            uni.showToast({
              icon: "none",
              title: "支付成功",
            });
            setTimeout(() => {
              uni.redirectTo({
                url: "/pages/movie/my-ticket",
              });
            }, 500);
            console.log("success:" + JSON.stringify(res));
          },
          fail: function (err) {
            console.log("fail:" + JSON.stringify(err));
          },
        });
      }
    },

    //微信下单 支付
    async miniPay() {
      const res = await sheep.$api.movie.payMovieAdd({
        payId: this.orderNumber,
        wechatType: 1,
      });
      if (res.code == 200) {
        uni.requestPayment({
          provider: "wxpay",
          timeStamp: res.data.timeStamp,
          nonceStr: res.data.nonceStr,
          package: "prepay_id=" + res.data.package_,
          signType: res.data.signType,
          paySign: res.data.paySign,
          success: function (res) {
            uni.showToast({
              icon: "none",
              title: "支付成功",
            });
            setTimeout(() => {
              uni.redirectTo({
                url: "/pages/movie/my-ticket",
              });
            }, 500);
            console.log("success:" + JSON.stringify(res));
          },
          fail: function (err) {
            console.log("fail:" + JSON.stringify(err));
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f4f5f7;
}
.amount {
  text-align: center;
  padding-top: 80rpx;
  color: #fe602b;
  font-size: 72rpx;
  font-weight: 550;
  text {
    font-size: 36rpx;
  }
}
.pay-tips {
  text-align: center;
  color: #636775;
  font-size: 28rpx;
  margin-top: 6rpx;
}
.pay-info-item {
  margin: 70rpx 32rpx 0rpx 32rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx 32rpx;
  .film-title {
    color: #2d3039;
    font-size: 36rpx;
    font-weight: 550;
    padding-bottom: 8rpx;
  }
  .film-text {
    margin-top: 12rpx;
    color: #636775;
    font-size: 28rpx;
  }
}

.pay-item {
  margin: 20rpx 25rpx 0rpx 25rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 26rpx 32rpx;
  display: flex;
  align-items: center;
  .item-left {
    display: flex;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
    text {
      color: #2d3039;
      font-size: 28rpx;
      margin-left: 20rpx;
    }
  }
  .pay-check {
    margin-left: auto;
    width: 36rpx;
    height: 36rpx;
  }
}

.pay-btns {
  position: fixed;
  bottom: 50rpx;
  left: 32rpx;
  right: 32rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #fe602b;
  border-radius: 50rpx;
  color: #ffffff;
  font-size: 36rpx;
  font-weight: 550;
}

.scroll-box {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 40rpx;
}
.index-nav-scroll {
  width: 100%;
}
/* 公共样式 */
.index-nav-view {
  display: inline-block;
  margin: 0rpx 22rpx;
  width: 70%;
  height: 200rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  padding: 10rpx;
}

.index {
  height: 100%;
  border-radius: 20rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  padding: 10rpx;
  font-weight: 700;
  position: relative;
}

.indexradio {
  position: absolute;
  right: 0rpx;
  bottom: 10rpx;
}

/* 特定样式 */
.index-nav-view1 {
  background: linear-gradient(to right, #ffc39e, #ff8273);
}
.index1 {
  background: linear-gradient(to right, #ffdcbd, #ff9f99);
  color: #fd9744;
}

.index-nav-view2 {
  background: linear-gradient(to right, #454756, #333243);
}

.index2 {
  background: linear-gradient(to right, #4a4b56, #373541);
  border: #c8b17c solid 2rpx;
  color: #c8b17c;
}

.index-nav-view3 {
  background: linear-gradient(to right, #c181f0, #974eeb);
}

.index3 {
  background: linear-gradient(to right, #deb6fd, #8338ee);
  color: #8324b7;
}
</style>
